{include file="public/header,public/nav,public/fixbar" title="意见反馈-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>意见反馈</h2>
                    <form class="layui-form" autocomplete="off">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">反馈标签</label> 
                                <div class="layui-input-block">
                                    {foreach $getAdviceType as $k=>$v}
                                        <input type="radio" name="advice_type" value="{$k}" title="{$v}" {if $k == '产品建议'} checked {/if}>
                                    {/foreach}
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">问题描述</label> 
                            <div class="layui-input-block">
                                <textarea name="advice_content" id="advice_content" placeholder="输入你要反馈的问题" class="layui-textarea" lay-affix="clear" oninput="wordLength(this);" onpropertychange="if(value.length>200) value=value.substr(0,200)" lay-verify="required" lay-verType="tips" lay-reqtext="请输入你要反馈的问题"></textarea>
                                <div class="word-input"><span class="aadvice_content">0</span>&nbsp;/&nbsp;<span>200</span></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">问题截图</label>
                            <div class="layui-input-block">
                                <div class="layui-upload-list">
                                    <div class="uploader-list" id="uploader-list">
                                        <div class="layui-upload-drag" id="image_url">
                                            <i class="layui-icon layui-icon-addition"></i>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="layui-form-mid layui-text-em">
                                    选填，最多上传5张图片，图片支持PNG、JPG、JPEG格式，大小不超过2M。
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">联系方式</label> 
                            <div class="layui-input-block">
                                <input type="text" name="phone" lay-verify="required|phone" lay-verType="tips" lay-reqtext="请输入联系方式" placeholder="输入联系方式" value="" maxlength="20" class="layui-input"> 
                            </div>
                        </div>
                        <div class="hr-line"></div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-bg-success" id="saveBtn" lay-submit lay-filter="saveBtn">提交反馈</button>
                                <a class="layui-btn layui-btn-primary" href="javascript:history.go(-1)">返 回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['form','layer','laydate','upload'], function(){
        var layer = layui.layer, upload = layui.upload, form = layui.form, laydate = layui.laydate, $=layui.jquery;
        
        //多图片上传
        var upload_loading;
        upload.render({
            elem: '#image_url'
            ,url: '/upload/uploadImg' //此处配置你自己的上传接口即可
            ,accept: 'images' //图片
            ,acceptMime:'image/jpg, image/png, image/jpeg' // 筛选出的文件类型
            ,exts: 'jpg|png|jpeg' //允许上传的文件后缀
            ,multiple: true
            ,number: 5
            ,headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            ,before: function(obj){
                upload_loading = layer.msg('图片上传中...', {icon: 16,shade: 0.3,time: false});
                var number = $("#uploader-list").find("div").find("img").length;
                if (number >= 5){
                    layer.close(upload_loading); //关闭loading
                    layer.msg("最多可传问题图片5张", {icon:7});
                    return false;
                }
            }
            ,done: function(res){
                //上传完毕
                layer.close(upload_loading); //关闭loading
                
                $('#uploader-list').prepend(
                    '<div class="file-iteme">' +
                        '<div class="handle" style="display: none;"><i style="width:50%" class="layui-icon layui-icon-delete"></i><i style="width:50%" data-src="'+res.data+'" class="layui-icon layui-icon-eye"></i></div>' +
                        '<img src='+ res.data +'>' +
                    '</div>'
                );
            }
            ,error: function(index, upload){
                layer.close(upload_loading); //关闭loading
                layer.msg('上传失败', {icon: 2});
            }
        });

        form.on('submit(saveBtn)', function(data){
            var imgs = $('.file-iteme img');
            var imgArray=[];
            imgs.each(function () {
                var url=$(this).attr('src');
                //滤空
                if (url){
                    imgArray.push(url);
                }
            });
            data.field.imgs = imgArray;
            var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});
            $.ajax({
                url:'/user/feedback',
                type:'post',
                data:data.field,
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);  //返回数据关闭loading
                    if(res.code == 0){
                        $("#saveBtn").removeClass("layui-bg-success").addClass("layui-btn-disabled");
                        $("#saveBtn").attr("disabled","true");
                        layer.msg(res.msg,{icon: 1,time:1500},function(){
                            location.reload();
                        });
                        
                    } else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
                
            });
            return false;
        });
    });

</script>